<template>

  <el-dialog :visible.sync='visible' :title="type === 'insert' ? '新增分类标签' : '修改分类标签'" width='600px'
             @closed='closeDialog'>
    <el-row v-if="tag.level > 1 && type === 'insert'">
      <el-col :span='7'>
        <span class='label'>上级分类名称<em style='color: red'>*</em></span>
      </el-col>
      <el-col :span='17'>
        <el-input disabled v-model="tag.parentName"/>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span='7'>
        <span class='label'>分类标签名称<em style='color: red'>*</em></span>
      </el-col>
      <el-col :span='17'>
        <el-input v-model="tag.name" placeholder="请输入分类编码名称"/>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span='7'>
        <span class='label'>级别<em style='color: red'>*</em></span>
      </el-col>
      <el-col :span='17'>
        <el-input disabled v-model="tag.level"/>
      </el-col>
    </el-row>

    <el-row v-if="tag.level === 1">
      <el-col :span='7'>
        <span class='label'>编码属性<em style='color: red'>*</em></span>
      </el-col>
      <el-col :span='17'>
        <el-switch :disabled="type === 'update'"
          v-model="tag.selfDefinedFlag"
          active-text="自定义编码"
          inactive-text="非自定义编码"
          active-color="#13ce66"
          inactive-color="#ff4949">
        </el-switch>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span='7'>
        <span class='label'>分类编码<em style='color: red'>*</em></span>
      </el-col>
      <el-col :span='17'>
        <el-input :disabled="tag.selfDefinedFlag && tag.level > 1" v-model="tag.tagCode" placeholder="请输入分类编码"/>
      </el-col>
    </el-row>

    <el-row v-show="tag.selfDefinedFlag">
      <el-col :span='7'>
        <span class='label'>上传附件</span>
      </el-col>
      <el-col :span='17'>
        <el-upload ref="upload" :action="'/pmph/action/tag/uploadTagFile?supTagId=' + tag.id"
                   accept=".xlsx"
                   :before-remove="removeTagFile"
                   :file-list.sync="tag.fileList">
          <el-button type="primary">上传下级分类</el-button>
        </el-upload>
      </el-col>
    </el-row>

    <div class="dialog-footer" slot="footer">
        <el-button @click='visible = false'>取 消</el-button>
        <el-button @click="submit" type="primary">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    name: 'InsertTagDialog',
    data() {
      return {
        type: '',
        visible: false,
        tag: {
          id: UTIL.generateSfId(),
          index: 0,
          level: 1,
          name: '',
          parentId: '',
          rootId: '',
          tagCode: '',
          selfDefinedFlag: true,
          fileList: [],
          parentName: '',
        },
        siblingTagList: []
      }
    },
    methods: {
      async removeTagFile(file) {
        var removeFlag = false
        await this.axios.get('/pmph/action/tag/removeTagFile', {
          params: {
            supTagId: this.tag.id,
            tagFileName: file.name
          }
        }).then(() => {
          removeFlag = true
        })
        return removeFlag
      },
      submit(){
        // 校验;
        if (!this.tag.name){
          this.$message.warning("标签名称不能为空")
          return
        }
        if (!this.tag.tagCode){
          this.$message.warning("分类编码不能为空")
          return
        }

        for (let siblingTag of this.siblingTagList) {
          if (siblingTag.name === this.tag.name && siblingTag.id !== this.tag.id) {
            this.$message.warning("标签名称和兄弟节点重复")
            return
          }
        }
        let cntTag = JSON.parse(JSON.stringify(this.tag))
        let param = new URLSearchParams()
        param.append("tag", JSON.stringify(this.tag))
        this.axios.post('/pmph/action/tag/saveTag', param).then(() => {
          this.$emit('saveTag', cntTag)
        })
        this.visible = false
      },
      closeDialog(){
        this.visible = false;
        this.tag.id = UTIL.generateSfId()
        this.tag.fileList = []
        this.tag.name = ''
        this.tag.tagCode = ''
        this.tag.selfDefinedFlag = true
      }
    },
  }
</script>

<style scoped>
  .el-row {
    line-height: 50px;
  }

  .el-col {
    display: inline-block;
  }

  /deep/ .el-dialog__body {
    padding: 0px 20px;
  }
</style>
